<!--添加修改角色信息-->
<template>
    <a-modal v-model="showAddTable" :mask-closable="false" :closable="false" :width="900"
             :title="title ? '系统角色新增' : '系统角色编辑'"
             :maskClosable="false"
             :destroyOnClose="true">
        <a-form :form="form" @keydown.native.enter.prevent="saveApply" class="modelSearch">
            <a-form-item label="角色名称：" prop="name" v-bind="formStyle">
                <a-input
                        placeholder="请输入角色名称" ref="re"
                        v-decorator="[
                        'name',
                        {
                            rules: [
                                { required: true, message: '请输入汉字、字母、数字、_或-字符' },
                                { validator: this.verify.validateName.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSpace(event)
                            }
                        }
                    ]"
                />
            </a-form-item>
            <a-form-item label="受限角色：" prop="limited" v-bind="formStyle">
                <a-select  placeholder="全部"
                          v-decorator="['limited',  { rules: [{ required: true, message: '请选择角色' }] }]">
                    <a-select-option value="1" key="1">是</a-select-option>
                    <a-select-option value="0" key="0">否</a-select-option>
                </a-select>
            </a-form-item>
           <!-- <a-form-item label="最大授权用户数量：" v-bind="formStyle" required>
                <a-input-number
                        placeholder="请输入最大授权用户数量"
                        :min="0"
                        :max="5"
                        :formatter="verify.limitInteger"
                        :parser="verify.limitInteger"
                        style="width: 100%"
                        v-decorator="['maxUsers', { initialValue: '0' },{ rules: [{ required: true, message: '请输入正整数' }] }]"
                ></a-input-number>
            </a-form-item>
            <a-form-item label="角色类型：" v-bind="formStyle" required>
                <a-select :getPopupContainer="trigger => trigger.parentNode"
                          placeholder="请选择角色类型"
                          v-decorator="['type', { initialValue: '1' }, { rules: [{ required: true, message: '请选择角色类型' }] }]">
                    <a-select-option v-for="item in roleTypeList" :value="item.value" :key="item.value">{{
                        item.label }}
                    </a-select-option>
                </a-select>
            </a-form-item>-->
            <a-form-item label="所属组织机构：" prop="orgId" ref="orgId" v-if="permission.sysOrg" v-bind="formStyle">
                <!--<select-tree class="search" v-model="sysRoleDTO.orgId" :treeList="orgTreeData"
                             :selectedNode="selectedNode"
                             @selectTreeData="selectedTreeId" style="width:252px" />-->
                <a-tree-select
                        style="width: 100%"
                        :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                        :treeData="orgTreeData"  placeholder="请选择所属组织机构"
                        v-decorator="['orgId', { rules: [{ required: true, message: '请选择所属组织机构' }] }]">
                    <span style="color: #08c" slot="title" slot-scope="{key, title}">{{title}}</span>
                </a-tree-select>
            </a-form-item>
            <a-form-item label="描述：" prop="description" v-bind="formStyle">
                <a-textarea v-decorator="['description',{   rules: [{validator:this.verify.validateDescripte.bind(this)}],
                               getValueFromEvent: (event) => {
                                   return this.verify.formalhundredSpace(event)
                               }
                            }]" :rows="2" placeholder="请输入描述"/>
            </a-form-item>
        </a-form>
        <div slot="footer">
            <a-button type="default" size="default" @click="cancelApply()">取消</a-button>
            <a-button type="primary" size="default" @click="saveApply()">确定</a-button>
        </div>
    </a-modal>
</template>

<script>
    import verify from 'libs/verify'
    import AFormItem from 'ant-design-vue/es/form/FormItem'
    export default {
        name: 'addEdit',
        components: {
            AFormItem,
        },
        data () {
            return {
                verify,
                form: this.$form.createForm(this),
                showAddTable: false,
                input: false,
                originalData: {},
                selectedNode: {},
                orgTreeData: [],
            }
        },
        computed: {
            formStyle() {
                return this.$store.state.common.formStyle
            }
        },
        props: {
            sysRoleDTO: {
                type: Object,
                required: true
            },
            title: {
                type: Boolean,
                required: true
            },
            orgTree: {
                type: Array,
                required: true
            },
            roleTypeList: {
                type: Array,
                required: true
            },
            permission: {
                type: Object,
                required: true
            }
        },
        watch: {
            orgTree ( value ) {
                this.orgTreeData = value
            },
            sysRoleDTO ( value ) {
                this.selectedNode = {
                    id: value.orgId,
                    name: value.orgName
                }
            }
        },
        methods: {
            /**
             * Function    : saveApply
             * Description : 打开弹框
             * Input       : none
             * Return      : none
             */
            showModal () {
                this.showAddTable = true
            },
            /**
             * Function    : showEdit
             * Description : 编辑时显示
             * Input       : opt单个所有数据
             * Return      : none
             */
            showEdit ( opt ) {
                this.showAddTable = true
                this.id = opt.id
                this.$nextTick (() => {
                    this.form.setFieldsValue (this.$pick (opt, [ 'name', 'limited', 'orgId','description','maxUsers','type' ]))
                })
            },

            /**
             * Function    : saveApply
             * Description : 角色信息新增、编辑保存
             * Input       : name
             * Return      : none
             */
            saveApply ( ) {
                this.form.validateFields((err, value) => {
                    if (!err) {
                        let para = Object.assign ({}, this.sysRoleDTO)
                        para.name = value.name
                        para.limited = value.limited
                        para.orgId = value.orgId
                        para.description = value.description
                        para.type = value.type
                        para.maxUsers = value.maxUsers
                        if (this.title) {
                            this.$store.dispatch ('addSysRoleAct', para).then (response => {
                                this.showAddTable = false
                                if (response.code === 0) {
                                    this.$emit ('init')
                                    this.$message.success (response.message)
                                } else {
                                    this.$message.error (response.message)
                                }
                            })
                        } else {
                            if (this.originalData !== this.sysUserDtos) {
                                para.id = this.id
                                this.$store.dispatch ('updSysRoleAct', para).then (response => {
                                    this.showAddTable = false
                                    if (response.code === 0) {
                                        this.$emit ('init')
                                        this.$message.success (response.message)
                                    } else {
                                        this.$message.error (response.message)
                                    }
                                })
                            } else {
                                this.showAddTable = false
                            }
                        }
                    }
                })
            },

            /**
             * Function    : cancelApply
             * Description : 取消弹出框
             * Input       : val
             * Return      : none
             */
            cancelApply ( ) {
                this.showAddTable = false
                let _this = this
                setTimeout(function() {
                    _this.form.resetFields()
                }, 100)
            },

            /**
             * Function    : selectedTreeId
             * Description :
             * Input       : val
             * Return      : none
             */
            changeInputType ( ) {
                this.input = !this.input
                let _this = this
                setTimeout(function() {
                    _this.form.resetFields()
                }, 100)
            },

            /**
             * Function    : selectedTreeId
             * Description :
             * Input       : val
             * Return      : none
             */
            selectedTreeId ( val ) {
                this.$refs[ 'orgId' ].resetField ()
                this.sysRoleDTO.orgId = val.id
            }
        },

        created () {

        }
    }
</script>
